<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>凡思美育-视频页面</title>
    <link rel="stylesheet" href="css/video.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
   
    <link rel="shortcut icon" href="images/logo1.png">

    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

    <style>
        body{
            height: 2000px;
        }
         video {
            /* width: 100%; */
            /* float: right; */
            display: block;
            width: 900px;
            /* margin-top: px; */
            margin: -415px auto;
        }
        ol li:first-child{
            list-style: none;
        }
    </style>
</head>
<body>

    <!-- This example requires Tailwind CSS v2.0+ -->
<div class="relative bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6">
      <div class="flex justify-between items-center border-b-2 border-gray-100 py-2 md:justify-start md:space-x-10">
        <div class="flex justify-start lg:w-0 lg:flex-1">
          <a href="index.html">
            <span class="sr-only">Workflow</span>
            <div class="bg-blue-700 rounded-lg"> 
            <img class=" w-auto sm:h-16" src="images/fsmy1.png" alt="">

            </div>
          </a>
        </div>
        <div class="-mr-2 -my-2 md:hidden">
          <button type="button" class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-expanded="false">
            <span class="sr-only">Open menu</span>
            <!-- Heroicon name: outline/menu -->
            <svg class="h-6 w-6 " xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
          </button>
        </div>
        <nav class="hidden md:flex space-x-10">
          <div class="relative">
            <!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
            <button type="button" class="text-gray-500 group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 one" aria-expanded="false">
              <span>更多课程</span>
              <!--
                Heroicon name: solid/chevron-down
  
                Item active: "text-gray-600", Item inactive: "text-gray-400"
              -->
              <svg class="text-gray-400 ml-2 h-5 w-5 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </button>
  
            <!--
              'Solutions' flyout menu, show/hide based on flyout menu state.
  
              Entering: "transition ease-out duration-200"
                From: "opacity-0 translate-y-1"
                To: "opacity-100 translate-y-0"
              Leaving: "transition ease-in duration-150"
                From: "opacity-100 translate-y-0"
                To: "opacity-0 translate-y-1"
            -->
            <div class="absolute z-10 -ml-4 mt-3 transform px-2 w-screen max-w-md sm:px-0 lg:ml-0 lg:left-1/2 lg:-translate-x-1/2">
              <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden div_one">
                <div class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 ">
                  <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50">
                    <!-- Heroicon name: outline/chart-bar -->
                    <svg class="flex-shrink-0 h-6 w-6 text-indigo-600 display:none " xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                    </svg>
                    <div class="ml-4">
                      <p class="text-base font-medium text-gray-900">家庭教育</p>
                      <p class="mt-1 text-sm text-gray-500">幼儿成长随笔,家庭教育心得体会,幼儿亲子教育,幼儿家教误区,幼儿家长学校...</p>
                    </div>
                  </a>
  
                  <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50">
                    <!-- Heroicon name: outline/cursor-click -->
                    <svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
                    </svg>
                    <div class="ml-4">
                      <p class="text-base font-medium text-gray-900">编程</p>
                      <p class="mt-1 text-sm text-gray-500">编程是编定程序的中文简称，就是让计算机代码解决某个问题，对某个计算体系...</p>
                    </div>
                  </a>
  
                  <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50">
                    <!-- Heroicon name: outline/shield-check -->
                    <svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                    </svg>
                    <div class="ml-4">
                      <p class="text-base font-medium text-gray-900">武术</p>
                      <p class="mt-1 text-sm text-gray-500">武术自从1916年进入我国学校体育课程以来,在很大程度上推动了武术...</p>
                    </div>
                  </a>
  
                  <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50">
                    <!-- Heroicon name: outline/view-grid -->
                    <svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
                    </svg>
                    <div class="ml-4">
                      <p class="text-base font-medium text-gray-900">英语</p>
                      <p class="mt-1 text-sm text-gray-500">星英语学习网致力于打造英语学习互助,英语资源分享网站。包含英语听力,英语口语,英语四级...</p>
                    </div>
                  </a>
  
                  <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50">
                    <!-- Heroicon name: outline/refresh -->
                    <svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                    </svg>
                    <div class="ml-4">
                      <p class="text-base font-medium text-gray-900">其他</p>
                      <p class="mt-1 text-sm text-gray-500">其他更多培训课程及机构...</p>
                    </div>
                  </a>
                </div>
                <div class="px-5 py-5 bg-gray-50 space-y-6 sm:flex sm:space-y-0 sm:space-x-10 sm:px-8">
                  <div class="flow-root">
                    <a href="#" class="-m-3 p-3 flex items-center rounded-md text-base font-medium text-gray-900 hover:bg-gray-100">
                      <!-- Heroicon name: outline/play -->
                      <svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                      </svg>
                      <span class="ml-3">课程中心</span>
                    </a>
                  </div>
  
                  <div class="flow-root">
                    <a href="#" class="-m-3 p-3 flex items-center rounded-md text-base font-medium text-gray-900 hover:bg-gray-100">
                      <!-- Heroicon name: outline/phone -->
                      <svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                      </svg>
                      <span class="ml-3">联系我们</span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
  
          <a href="#" class="text-base font-medium text-gray-500 hover:text-gray-900"> 下载APP </a>
          <a href="#" class="text-base font-medium text-gray-500 hover:text-gray-900"> 个人中心 </a>
  
          <div class="relative">
            <!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
            <button type="button" class="text-gray-500 group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 two" aria-expanded="false">
              <span>机构简介</span>
              <!--
                Heroicon name: solid/chevron-down
  
                Item active: "text-gray-600", Item inactive: "text-gray-400"
              -->
              <svg class="text-gray-400 ml-2 h-5 w-5 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </button>
  
            <!--
              'More' flyout menu, show/hide based on flyout menu state.
  
              Entering: "transition ease-out duration-200"
                From: "opacity-0 translate-y-1"
                To: "opacity-100 translate-y-0"
              Leaving: "transition ease-in duration-150"
                From: "opacity-100 translate-y-0"
                To: "opacity-0 translate-y-1"
            -->
            <div class="absolute z-10 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-md sm:px-0">
              <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden display:none div_two">
                <div class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 ">
                  <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50">
                    <!-- Heroicon name: outline/support -->
                    <svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
                    </svg>
                    <div class="ml-4 det">
                      <p class="text-base font-medium text-gray-900">帮助中心</p>
                      <p class="mt-1 text-sm text-gray-500">Get all of your questions answered in our forums or contact support.</p>
                    </div>
                  </a>
  
                  <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50">
                    <!-- Heroicon name: outline/bookmark-alt -->
                    <svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 4v12l-4-2-4 2V4M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                    <div class="ml-4 det">
                      <p class="text-base font-medium text-gray-900">教学环境</p>
                      <p class="mt-1 text-sm text-gray-500">Learn how to maximize our platform to get the most out of it.</p>
                    </div>
                  </a>
  
                  <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50">
                    <!-- Heroicon name: outline/calendar -->
                    <svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                    <div class="ml-4 det">
                      <p class="text-base font-medium text-gray-900">机构详情</p>
                      <p class="mt-1 text-sm text-gray-500">See what meet-ups and other events we might be planning near you.</p>
                    </div>
                  </a>
  
                  <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50">
                    <!-- Heroicon name: outline/shield-check -->
                    <svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                    </svg>
                    <div class="ml-4 det">
                      <p class="text-base font-medium text-gray-900">资质教师</p>
                      <p class="mt-1 text-sm text-gray-500">Understand how we take your privacy seriously.</p>
                    </div>
                  </a>
                </div>
                <div class="px-5 py-5 bg-gray-50 sm:px-8 sm:py-8">
                  <div>
                  
                  </div>
                  <div class="mt-1 text-sm">
                    <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500"> 查看所有 <span aria-hidden="true">&rarr;</span></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </nav>
        <div class="hidden md:flex items-center justify-end md:flex-1 lg:w-0">
          <a href="#" class="whitespace-nowrap text-base font-medium text-gray-500 hover:text-gray-900"> 登录 </a>
          <a href="#" class="ml-8 whitespace-nowrap inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700"> 注册 </a>
        </div>
      </div>
    </div>
  
    <!--
      Mobile menu, show/hide based on mobile menu state.
  
      Entering: "duration-200 ease-out"
        From: "opacity-0 scale-95"
        To: "opacity-100 scale-100"
      Leaving: "duration-100 ease-in"
        From: "opacity-100 scale-100"
        To: "opacity-0 scale-95"
    -->
    <div class="absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
      <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y-2 divide-gray-50">
        <div class="pt-5 pb-6 px-5">
          <div class="flex items-center justify-between">
            <div>
              <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg" alt="Workflow">
            </div>
            <div class="-mr-2">
              <button type="button" class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
                <span class="sr-only">Close menu</span>
                <!-- Heroicon name: outline/x -->
                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
          </div>
          <div class="mt-6">
            <nav class="grid gap-y-8">
              <a href="#" class="-m-3 p-3 flex items-center rounded-md hover:bg-gray-50">
                <!-- Heroicon name: outline/chart-bar -->
                <svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                </svg>
                <span class="ml-3 text-base font-medium text-gray-900"> Analytics </span>
              </a>
  
              <a href="#" class="-m-3 p-3 flex items-center rounded-md hover:bg-gray-50">
                <!-- Heroicon name: outline/cursor-click -->
                <svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
                </svg>
                <span class="ml-3 text-base font-medium text-gray-900"> Engagement </span>
              </a>
  
              <a href="#" class="-m-3 p-3 flex items-center rounded-md hover:bg-gray-50">
                <!-- Heroicon name: outline/shield-check -->
                <svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                </svg>
                <span class="ml-3 text-base font-medium text-gray-900"> Security </span>
              </a>
  
              <a href="#" class="-m-3 p-3 flex items-center rounded-md hover:bg-gray-50">
                <!-- Heroicon name: outline/view-grid -->
                <svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
                </svg>
                <span class="ml-3 text-base font-medium text-gray-900"> Integrations </span>
              </a>
  
              <a href="#" class="-m-3 p-3 flex items-center rounded-md hover:bg-gray-50">
                <!-- Heroicon name: outline/refresh -->
                <svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                </svg>
                <span class="ml-3 text-base font-medium text-gray-900"> Automations </span>
              </a>
            </nav>
          </div>
        </div>
        <div class="py-6 px-5 space-y-6">
          <div class="grid grid-cols-2 gap-y-4 gap-x-8">
            <a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700"> Pricing </a>
  
            <a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700"> Docs </a>
  
            <a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700"> Help Center </a>
  
            <a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700"> Guides </a>
  
            <a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700"> Events </a>
  
            <a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700"> Security </a>
          </div>
          <div>
            <a href="#" class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700"> Sign up </a>
            <p class="mt-6 text-center text-base font-medium text-gray-500">
              Existing customer?
              <a href="#" class="text-indigo-600 hover:text-indigo-500"> Sign in </a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
   <!-- 列表 -->
  <div>
 
  <a href="#" class="group w-14">
    <div class="aspect-w-1 aspect-h-1  rounded-lg overflow-hidden relative mt-20 ml-5">
      <img src="http://upload.mobiletrain.org/2020/0415/1586915209960.jpg" alt="Tall slender porcelain bottle with natural clay textured body and cork stopper." class="object-center object-cover group-hover:opacity-75">
    </div>
    <!-- <h3 class="mt-2 ml-24 text-lg text-blue-700"></h3> -->
    <!-- <p class="mt-1 text-lg font-medium text-gray-900">$48</p> -->
  </a>
  <div class="list-group w-52 ml-5 text-center mt-9">
    <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
        UI设计教学
    </a>
    <a href="#" class="list-group-item list-group-item-action">课程简介</a>
    <a href="#" class="list-group-item list-group-item-action">学校背景</a>
    <a href="#" class="list-group-item list-group-item-action">教师资质</a>
    <a class="list-group-item list-group-item-action disabled">相似课程</a>
  </div>
    <video src="images/1.mp4" autoplay="autoplay" controls loop muted class="rounded-md "></video>
    <!-- 右列表 -->
    <ol class="list-group list-group-numbered absolute right-3 top-40 cursor-pointer">
       <h1 class="font-extrabold text-center  border bg-blue-600 leading-10 h-14 text-white text-lg pt-2">课程目录</h1>
        <li class="list-group-item d-flex justify-content-between align-items-start">
          <div class="ms-2 me-auto">
            <div class="fw-bold">HTML简介</div>
            1.1 h1标签的使用
          </div>
          <span class="badge bg-primary rounded-pill">1</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-start">
          <div class="ms-2 me-auto">
            <div class="fw-bold">锚点链接</div>
            2.1 表格标签
          </div>
          <span class="badge bg-primary rounded-pill">4</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-start">
          <div class="ms-2 me-auto">
            <div class="fw-bold">表单标签</div>
            3.1 表单域
          </div>
          <span class="badge bg-primary rounded-pill">2</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-start">
          <div class="ms-2 me-auto">
            <div class="fw-bold">新增语义化标签</div>
            4.1 < header > :头部标签
          </div>
          <span class="badge bg-primary rounded-pill">4</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-start">
          <div class="ms-2 me-auto">
            <div class="fw-bold">新增input类型</div>
            5.1 type=“email”
          </div>
          <span class="badge bg-primary rounded-pill">    7</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-start">
          <div class="ms-2 me-auto">
            <div class="fw-bold">新增表单属性</div>
            6.1 figure
          </div>
          <span class="badge bg-primary rounded-pill">5</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-start">
          <div class="ms-2 me-auto">
            <div class="fw-bold">accesskey介绍</div>
           7.1tabindex
          </div>
          <span class="badge bg-primary rounded-pill">14</span>
        </li>
      </ol>
    </div>
<!-- 购买 -->
<div class="fixed z-10 inset-0 overflow-y-auto hidden shop" role="dialog" aria-modal="true">
  <div class="flex min-h-screen text-center md:block md:px-2 lg:px-4" style="font-size: 0">
    <!--
      Background overlay, show/hide based on modal state.

      Entering: "ease-out duration-300"
        From: "opacity-0"
        To: "opacity-100"
      Leaving: "ease-in duration-200"
        From: "opacity-100"
        To: "opacity-0"
    -->
    <div class="hidden fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity md:block" aria-hidden="true"></div>

    <!-- This element is to trick the browser into centering the modal contents. -->
    <span class="hidden md:inline-block md:align-middle md:h-screen" aria-hidden="true">&#8203;</span>

    <!--
      Modal panel, show/hide based on modal state.

      Entering: "ease-out duration-300"
        From: "opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
        To: "opacity-100 translate-y-0 md:scale-100"
      Leaving: "ease-in duration-200"
        From: "opacity-100 translate-y-0 md:scale-100"
        To: "opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
    -->
    <div class="flex text-base text-left transform transition w-full md:inline-block md:max-w-2xl md:px-4 md:my-8 md:align-middle lg:max-w-4xl">
      <div class="w-full relative flex items-center bg-white px-4 pt-14 pb-8 overflow-hidden shadow-2xl sm:px-6 sm:pt-8 md:p-6 lg:p-8">
        <button type="button" class="absolute top-4 right-4 text-gray-400 hover:text-gray-500 sm:top-8 sm:right-6 md:top-6 md:right-6 lg:top-8 lg:right-8">
          <span class="sr-only">Close</span>
          <!-- Heroicon name: outline/x -->
          <svg class="h-6 w-6 close" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>

        <div class="w-full grid grid-cols-1 gap-y-8 gap-x-6 items-start sm:grid-cols-12 lg:gap-x-8">
          <div class="aspect-w-2 aspect-h-3 rounded-lg bg-gray-100 overflow-hidden sm:col-span-4 lg:col-span-5">
            <img src="images/shop.png" alt="Two each of gray, white, and black shirts arranged on table." class="object-center object-cover">
          </div>
          <div class="sm:col-span-8 lg:col-span-7">
            <h2 class="text-2xl font-extrabold text-gray-900 sm:pr-12">JAVA架构实战课</h2>

            <section aria-labelledby="information-heading" class="mt-2">
              <h3 id="information-heading" class="sr-only">Product information</h3>

              <p class="text-2xl text-gray-900">$1999</p>
<div><p class="text-sm text-gray-400 mt-2">老师专属答疑，多种形式教学服务</p>
<p class="text-sm text-gray-400">购买成功后将立即开启专属教学服务</p> </div><a href="" class="text-blue-600 text-xs  float-right -mt-4 mr-16">什么是专属教学服务？</a>
              <!-- Reviews -->
              <div class="mt-6">
                <h4 class="sr-only">Reviews</h4>
                <div class="flex items-center">
                  <div class="flex items-center">
                    <!--
                      Heroicon name: solid/star

                      Active: "text-gray-900", Default: "text-gray-200"
                    -->
                    <svg class="text-gray-900 h-5 w-5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>

                    <!-- Heroicon name: solid/star -->
                    <svg class="text-gray-900 h-5 w-5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>

                    <!-- Heroicon name: solid/star -->
                    <svg class="text-gray-900 h-5 w-5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>

                    <!-- Heroicon name: solid/star -->
                    <svg class="text-gray-900 h-5 w-5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>

                    <!-- Heroicon name: solid/star -->
                    <svg class="text-gray-200 h-5 w-5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                  </div>
                  <p class="sr-only">3.9 out of 5 stars</p>
                  <a href="#" class="ml-3 text-sm font-medium text-indigo-600 hover:text-indigo-500">117 评价</a>
                </div>
              </div>
            </section>

            <section aria-labelledby="options-heading" class="mt-10">
              <h3 id="options-heading" class="sr-only">Product options</h3>

             
                <!-- Sizes -->
                <div class="mt-10">
                  <div class="flex items-center justify-between">
                    <h4 class="text-sm text-gray-900 font-medium">课程系列</h4>
                    <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">购买指导</a>
                  </div>

                  <fieldset class="mt-4">
                    <legend class="sr-only">Choose a size</legend>
                    <div class="grid grid-cols-4 gap-4">
                  
                 

                  

                     
                      <label class="group relative border rounded-md py-3 px-4 flex items-center justify-center text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 bg-white shadow-sm text-gray-900 cursor-pointer">
                        <input type="radio" name="size-choice" value="L" class="sr-only" aria-labelledby="size-choice-4-label">
                        <p id="size-choice-4-label">入门版</p>

                        <!--
                          Active: "border", Not Active: "border-2"
                          Checked: "border-indigo-500", Not Checked: "border-transparent"
                        -->
                        <div class="absolute -inset-px rounded-md pointer-events-none" aria-hidden="true"></div>
                      </label>

                      <!-- Active: "ring-2 ring-indigo-500" -->
                      <label class="group relative border rounded-md py-3 px-4 flex items-center justify-center text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 bg-white shadow-sm text-gray-900 cursor-pointer">
                        <input type="radio" name="size-choice" value="XL" class="sr-only" aria-labelledby="size-choice-5-label">
                        <p id="size-choice-5-label">中级版</p>

                        <!--
                          Active: "border", Not Active: "border-2"
                          Checked: "border-indigo-500", Not Checked: "border-transparent"
                        -->
                        <div class="absolute -inset-px rounded-md pointer-events-none" aria-hidden="true"></div>
                      </label>

                      <!-- Active: "ring-2 ring-indigo-500" -->
                      <label class="group relative border rounded-md py-3 px-4 flex items-center justify-center text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 bg-white shadow-sm text-gray-900 cursor-pointer">
                        <input type="radio" name="size-choice" value="XXL" class="sr-only" aria-labelledby="size-choice-6-label">
                        <p id="size-choice-6-label">高级版</p>

                        <!--
                          Active: "border", Not Active: "border-2"
                          Checked: "border-indigo-500", Not Checked: "border-transparent"
                        -->
                        <div class="absolute -inset-px rounded-md pointer-events-none" aria-hidden="true"></div>
                      </label>

                      <!-- Active: "ring-2 ring-indigo-500" -->
                   
                    </div>
                  </fieldset>
                </div>

                <button type="submit" class="mt-6 w-full bg-indigo-600 border border-transparent rounded-md py-3 px-8 flex items-center justify-center text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">立即购买</button>
              </form>
            </section>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 评论 -->

<section class="w-full bg-blue-600 h-11  shadow-slate-400">
  <ul class=" text-white ml-96 pl">
    <li class="float-left  px-4 leading- leading-10 act"><span class="hover:text-white cursor-pointer" id="wd">问答</span></li>
    <li class="float-left  px-4 leading- leading-10"><span class="hover:text-white cursor-pointer" id="bj">笔记</span></li>
    <li class="float-left  px-4 leading- leading-10"><span class="hover:text-white cursor-pointer">评价</span></li>
    <li class="float-left  px-4 leading- leading-10"><span class="hover:text-white cursor-pointer">更多</span></li>
   
  </ul> 
  <button class="w-20 h-9 inline-block mt-1 ml-40 bg-red-500 text-center text-white rounded-lg 1 shopbtn">
    购买课程
  </button>
  <span class="text-sm text-black ml-9 cursor-pointer shopcar">我的购物车 <svg t="1650784869697" class="icon inline" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2055" width="20" height="20"><path d="M346.112 806.912q19.456 0 36.864 7.168t30.208 19.968 20.48 30.208 7.68 36.864-7.68 36.864-20.48 30.208-30.208 20.48-36.864 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-36.864 7.68-36.864 20.48-30.208 30.208-19.968 37.888-7.168zM772.096 808.96q19.456 0 37.376 7.168t30.72 19.968 20.48 30.208 7.68 36.864-7.68 36.864-20.48 30.208-30.72 20.48-37.376 7.68-36.864-7.68-30.208-20.48-20.48-30.208-7.68-36.864 7.68-36.864 20.48-30.208 30.208-19.968 36.864-7.168zM944.128 227.328q28.672 0 44.544 7.68t22.528 18.944 6.144 24.064-3.584 22.016-13.312 37.888-22.016 62.976-23.552 68.096-18.944 53.248q-13.312 40.96-33.28 56.832t-49.664 15.872l-35.84 0-65.536 0-86.016 0-96.256 0-253.952 0 14.336 92.16 517.12 0q49.152 0 49.152 41.984 0 20.48-9.728 35.328t-38.4 14.848l-49.152 0-94.208 0-118.784 0-119.808 0-99.328 0-55.296 0q-20.48 0-34.304-9.216t-23.04-24.064-14.848-32.256-8.704-32.768q-1.024-6.144-5.632-29.696t-11.264-58.88-14.848-78.848-16.384-87.552q-19.456-103.424-44.032-230.4l-76.8 0q-15.36 0-25.6-7.68t-16.896-18.432-9.216-23.04-2.56-22.528q0-20.48 13.824-33.792t37.376-13.312l21.504 0 21.504 0 25.6 0 34.816 0q20.48 0 32.768 6.144t19.456 15.36 10.24 19.456 5.12 17.408q2.048 8.192 4.096 23.04t4.096 30.208q3.072 18.432 6.144 38.912l700.416 0zM867.328 194.56l-374.784 0 135.168-135.168q23.552-23.552 51.712-24.064t51.712 23.04z" p-id="2056" fill="#d81e06"></path></svg></span>
</section>
<div id="list" class="relative ">
  <!-- 问答 -->
<div class=" w-2/3 flex mt-9 ml-36 rounded-2xl justify-center p-3 flex-wrap wd ">
  <div class="w-2/3 h-40 bg-white rounded-lg shadow-lg shadow-slate-600 px-28 py-10  relative mb-4">
    <img src="images/111.jpg  " alt="" class="w-10 h-10 rounded-xl absolute top-10 left-14">
    <h4 class="inline-block font-bold">请问一下杜老师怎么联系</h4>
    <div class="w-16 h-6 bg-gray-300 rounded-2xl mt-2 text-xs text-center leading-6 cursor-pointer">查看回答</div>
    <div class="pt-2 "><span class="text-xs text-center  text-gray-400">44浏览</span><span class="text-xs text-center mx-6 text-gray-400">2-4 javascript简介</span> <span class="text-xs text-center float-right pt-2 text-gray-400">2022-4-28</span></div>
    </div>
     <div class="w-2/3 h-40 bg-white rounded-lg shadow-lg shadow-slate-600 px-28 py-10  relative mb-4 ">
    <img src="images/p1.jpg" alt="" class="w-10 h-10 rounded-xl absolute top-10 left-14">
    <h4 class="inline-block font-bold">nlp有没有什么好的书籍推荐</h4>
    <div class="w-16 h-6 bg-gray-300 rounded-2xl mt-2 text-xs text-center leading-6 cursor-pointer">查看回答</div>
    <div class="pt-2 "><span class="text-xs text-center  text-gray-400">234浏览</span><span class="text-xs text-center mx-6 text-gray-400">2-1 自然语言处理</span> <span class="text-xs text-center float-right pt-2 text-gray-400">2022-4-27</span></div>
    </div>
     <div class="w-2/3 h-40 bg-white rounded-lg shadow-lg shadow-slate-600 px-28 py-10  relative mb-4 ">
    <img src="images/p2.jpg" alt="" class="w-10 h-10 rounded-xl absolute top-10 left-14">
    <h4 class="inline-block font-bold">在哪下载课件</h4>
    <div class="w-16 h-6 bg-gray-300 rounded-2xl mt-2 text-xs text-center leading-6 cursor-pointer">查看回答</div>
    <div class="pt-2 "><span class="text-xs text-center  text-gray-400">123浏览</span><span class="text-xs text-center mx-6 text-gray-400">2-5 表单元素使用</span> <span class="text-xs text-center float-right pt-2 text-gray-400">2022-4-27</span></div>
    </div>
     <div class="w-2/3 h-40 bg-white rounded-lg shadow-lg shadow-slate-600 px-28 py-10  relative mb-4 ">
    <img src="images/p3.jpg" alt="" class="w-10 h-10 rounded-xl absolute top-10 left-14">
    <h4 class="inline-block font-bold">corpus 输出不是中文怎么解决啊</h4>
    <div class="w-16 h-6 bg-gray-300 rounded-2xl mt-2 text-xs text-center leading-6 cursor-pointer">查看回答</div>
    <div class="pt-2 "><span class="text-xs text-center  text-gray-400">564浏览</span><span class="text-xs text-center mx-6 text-gray-400">3-6 人工智能数学基础与Python实战</span> <span class="text-xs text-center float-right pt-2 text-gray-400">2022-4-26</span></div>
    </div>
</div>
<!-- 笔记 -->

<div class=" w-2/3 flex mt-9 ml-36 rounded-2xl justify-center p-3 flex-wrap bj relative hidden">
  <!-- 标题 -->
  <div class="absolute top-0 left-0 w-full  border-solid border-b  border-gray-500 text-sm my-3 pb-3 cursor-pointer"><span class="text-red-600 px-4">最热</span><span class="text-gray-600">最新</span></div>


  <div class="w-full  bg-white rounded-lg shadow-lg shadow-slate-600 px-28 mt-16  relative mb-1 pb-3">
    <img src="images/b1.jpg" alt="" class="w-10 h-10 rounded-xl absolute top-4 left-11">
    <h4 class="inline-block font-extrabold pt-4 -ml-3">客粉2313453</h4>
    <h5 class="font-semibold pt-1"> 媒体查询+rem实现元素动态大小变化</h5>
    <p class="pl-5 leading-3 py-2"><strong>·</strong> rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸</p>
    <p class="pl-5 leading-3 py-2"><strong>·</strong> 媒体查询可以根据不同设备宽度来修改样式</p>
    <p class="pl-5 leading-3 py-2"><strong>·</strong> 媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化</p>
    <h4 class="inline-block font-extrabold pt-4 ">引入资源</h4>
    <p class="pl-5 leading-3 py-2"><strong>·</strong> 当样式比较繁多的时候，我们可以针对不同的媒体使用不同 stylesheets。</p>
    <p class="pl-5 leading-3 py-2 mb-3"><strong>·</strong> 原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件。</p>
    <span class="text-red-600 block text-center mb-2">查看全部</span>
    <a href="" class="text-sm text-gray-500 ">来源：媒体查询（Media Query）是CSS3新语法</a><span class="float-right text-gray-500 text-sm mt-1">2022-4-27</span>
  </div>
  <div class="w-full  bg-white rounded-lg shadow-lg shadow-slate-600 px-28 mt-14  relative mb-1 pb-4">
    <img src="images/b2.jpg" alt="" class="w-10 h-10 rounded-xl absolute top-4 left-11">
    <h4 class="inline-block font-extrabold pt-4 -ml-3">客粉2353434</h4>
    <h5 class="font-semibold pt-1"> transition过渡</h5>
    <p class="pl-5 leading-3 py-2"><strong>·</strong> 过渡动画：是从一个状态渐渐的过渡到另外一个状态</p>
    <p class="pl-5 leading-3 py-2"><strong>·</strong> 过渡经常和：hover一起搭配使用</p>
    <p class="pl-5 leading-3 py-2"><strong>·</strong> transition: 要过渡的属性 花费时间 运动曲线 何时开始</p>
    <h4 class="inline-block font-extrabold pt-4 ">2D转换</h4>
    <p class="pl-5 leading-3 py-2"><strong>·</strong> ①移动translate 定义2D转换中的移动，沿着X和Y轴移动元素</p>
    <p class="pl-5 leading-3 py-2 mb-3"><strong>·</strong> ②旋转rotate rotate 里面跟度数，单位是 deg 比如 rotate(45deg)</p>
    <span class="text-red-600 block text-center mb-2">查看全部</span>
    <a href="" class="text-sm text-gray-500 ">来源：transition过渡</a><span class="float-right text-gray-500 text-sm mt-1">2022-4-26</span>
  </div>
  


</div>
<!-- 评价 -->
<div class=" w-2/3 flex mt-9 ml-36 rounded-2xl justify-center p-3 flex-wrap pingjia hidden">
  <div class="w-2/3 h-40 bg-white rounded-lg shadow-lg shadow-slate-600 px-28 py-10  relative mb-4">
    <img src="images/b3.jpg" alt="" class="w-10 h-10 rounded-xl absolute top-10 left-14">
    <h4 class="inline-block font-bold">用户342342221</h4><span class="float-right text-xs text-gray-400">🌟🌟🌟🌟🌟 10分</span>
    <p class="text-sm pl-4 pt-2">课程很不错 讲的很耐心</p>
    
    <div class="pt-2 "><span class="text-xs text-center  text-gray-400">254浏览</span><span class="text-xs text-center mx-6 text-gray-400">2-4 javascript简介</span> <span class="text-xs text-center float-right pt-2 text-gray-400">2022-4-24</span></div>
    </div>
  <div class="w-2/3 h-40 bg-white rounded-lg shadow-lg shadow-slate-600 px-28 py-10  relative mb-4">
    <img src="images/11.jpg" alt="" class="w-10 h-10 rounded-xl absolute top-10 left-14">
    <h4 class="inline-block font-bold">用户23525255</h4><span class="float-right text-xs text-gray-400">🌟🌟🌟🌟🌟 10分</span>
    <p class="text-sm pl-4 pt-2">超级棒！老师讲的特别细</p>
    
    <div class="pt-2 "><span class="text-xs text-center  text-gray-400">213浏览</span><span class="text-xs text-center mx-6 text-gray-400">2-4 HTML简介</span> <span class="text-xs text-center float-right pt-2 text-gray-400">2022-4-23</span></div>
    </div>
  <div class="w-2/3 h-40 bg-white rounded-lg shadow-lg shadow-slate-600 px-28 py-10  relative mb-4">
    <img src="images/22.jpg" alt="" class="w-10 h-10 rounded-xl absolute top-10 left-14">
    <h4 class="inline-block font-bold">用户2342221</h4><span class="float-right text-xs text-gray-400">🌟🌟🌟🌟 &nbsp; 8分</span>
    <p class="text-sm pl-4 pt-2">讲的有点深奥，可能是我基础不好吧</p>
    
    <div class="pt-2 "><span class="text-xs text-center  text-gray-400">213浏览</span><span class="text-xs text-center mx-6 text-gray-400">5-6 C3动画</span> <span class="text-xs text-center float-right pt-2 text-gray-400">2022-4-13</span></div>
    </div>
  <div class="w-2/3 h-40 bg-white rounded-lg shadow-lg shadow-slate-600 px-28 py-10  relative mb-4">
    <img src="images/33.jpg" alt="" class="w-10 h-10 rounded-xl absolute top-10 left-14">
    <h4 class="inline-block font-bold">用户13131255</h4><span class="float-right text-xs text-gray-400">🌟&nbsp;&nbsp;&nbsp;&nbsp; 2分</span>
    <p class="text-sm pl-4 pt-2">什么嘛 完全听不懂</p>
    
    <div class="pt-2 "><span class="text-xs text-center  text-gray-400">124浏览</span><span class="text-xs text-center mx-6 text-gray-400">2-9 精灵图Sprites</span> <span class="text-xs text-center float-right pt-2 text-gray-400">2022-4-2</span></div>
    </div>
  <div class="w-2/3 h-40 bg-white rounded-lg shadow-lg shadow-slate-600 px-28 py-10  relative mb-4">
    <img src="images/44.jpg" alt="" class="w-10 h-10 rounded-xl absolute top-10 left-14">
    <h4 class="inline-block font-bold">用户9767546432</h4><span class="float-right text-xs text-gray-400">🌟🌟🌟🌟🌟 10分</span>
    <p class="text-sm pl-4 pt-2">好评好评</p>
    
    <div class="pt-2 "><span class="text-xs text-center  text-gray-400">44浏览</span><span class="text-xs text-center mx-6 text-gray-400">3-2 vertical-align</span> <span class="text-xs text-center float-right pt-2 text-gray-400">2022-4-1</span></div>
    </div>

  
  
</div>

</div>
<div class="slider">
  <!-- 课程 -->
<div class="grid grid-cols-1 gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8" id="per">
  <a href="video.html" class="group">
    <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8 relative exm_video">
      <img src="http://www.mobiletrain.org/page/it/images/c7_b3.png" alt="Tall slender porcelain bottle with natural clay textured body and cork stopper." class="w-full h-full object-center object-cover group-hover:opacity-75">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-play-circle-fill start" viewBox="0 0 16 16">
        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"/>
      </svg>
    </div>

</div>
<!-- 相关课程 -->
<div class="re mt-3 ">
  <h4 class="font-bold mb-1">相关课程</h4>
  <ul>
    <li class="flex mb-2">
      <img src="images/re1.jpg" alt="11" class="rounded-md "><div class=" border-b border-gray-400 ml-2"><p class="text-sm  pt-2 text-gray-500 ">Vue核心技术Vue+Vue-Rout...
      </p><span class="text-sm">$299</span><i class="text-sm"> · 中级 ·</i> <svg t="1650778403840" class="icon inline" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3591" width="16" height="16"><path d="M512 153.6c-123.477333 0-235.178667 51.9168-323.089067 137.557333C117.230933 360.96 68.266667 448.938667 68.266667 505.173333v13.6704c0 56.234667 48.981333 144.196267 120.644266 214.016C276.804267 818.466133 388.522667 870.4 512 870.4c123.613867 0 235.246933-51.234133 322.7648-135.970133 71.799467-69.5296 120.490667-157.320533 120.968533-215.296V505.173333c-0.477867-58.2656-49.169067-146.056533-120.968533-215.586133C747.246933 204.8512 635.5968 153.6 512 153.6z m0 68.266667c104.6528 0 199.799467 43.6736 275.268267 116.753066 59.886933 57.992533 99.8912 130.133333 100.1984 166.843734v13.380266c-0.3072 36.420267-40.311467 108.544-100.181334 166.536534C711.7824 758.459733 616.635733 802.133333 512 802.133333c-104.3456 0-199.560533-44.2368-275.456-118.186666C176.810667 625.7664 136.533333 553.4208 136.533333 518.843733V505.173333c0-34.577067 40.277333-106.922667 100.010667-165.12C312.439467 266.120533 407.6544 221.866667 512 221.866667z" fill="#444444" p-id="3592"></path><path d="M512 341.333333c-94.2592 0-170.666667 76.407467-170.666667 170.666667s76.407467 170.666667 170.666667 170.666667 170.666667-76.407467 170.666667-170.666667-76.407467-170.666667-170.666667-170.666667z m0 68.266667a102.4 102.4 0 1 1 0 204.8 102.4 102.4 0 0 1 0-204.8z" fill="#00B386" p-id="3593"></path></svg><i class="text-xs text-gray-500 pl-2 mt-2">1416</i></div>
    </li>
    <li class="flex mb-2">
      <img src="images/re2.jpg" alt="11" class="rounded-md "><div class=" border-b border-gray-400 ml-2"><p class="text-sm  pt-2 text-gray-500 ">Python3+TensorFlow打造的...
      </p><span class="text-sm">$289</span><i class="text-sm"> · 高级 ·</i> <svg t="1650778403840" class="icon inline" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3591" width="16" height="16"><path d="M512 153.6c-123.477333 0-235.178667 51.9168-323.089067 137.557333C117.230933 360.96 68.266667 448.938667 68.266667 505.173333v13.6704c0 56.234667 48.981333 144.196267 120.644266 214.016C276.804267 818.466133 388.522667 870.4 512 870.4c123.613867 0 235.246933-51.234133 322.7648-135.970133 71.799467-69.5296 120.490667-157.320533 120.968533-215.296V505.173333c-0.477867-58.2656-49.169067-146.056533-120.968533-215.586133C747.246933 204.8512 635.5968 153.6 512 153.6z m0 68.266667c104.6528 0 199.799467 43.6736 275.268267 116.753066 59.886933 57.992533 99.8912 130.133333 100.1984 166.843734v13.380266c-0.3072 36.420267-40.311467 108.544-100.181334 166.536534C711.7824 758.459733 616.635733 802.133333 512 802.133333c-104.3456 0-199.560533-44.2368-275.456-118.186666C176.810667 625.7664 136.533333 553.4208 136.533333 518.843733V505.173333c0-34.577067 40.277333-106.922667 100.010667-165.12C312.439467 266.120533 407.6544 221.866667 512 221.866667z" fill="#444444" p-id="3592"></path><path d="M512 341.333333c-94.2592 0-170.666667 76.407467-170.666667 170.666667s76.407467 170.666667 170.666667 170.666667 170.666667-76.407467 170.666667-170.666667-76.407467-170.666667-170.666667-170.666667z m0 68.266667a102.4 102.4 0 1 1 0 204.8 102.4 102.4 0 0 1 0-204.8z" fill="#00B386" p-id="3593"></path></svg><i class="text-xs text-gray-500 pl-2 mt-2">7843</i></div>
    </li>
    <li class="flex mb-2">
      <img src="images/re3.jpg" alt="11" class="rounded-md "><div class=" border-b border-gray-400 ml-2"><p class="text-sm  pt-2 text-gray-500 ">深度学习之目标检测常用算法...
      </p><span class="text-sm">$999</span><i class="text-sm"> · 中级 ·</i> <svg t="1650778403840" class="icon inline" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3591" width="16" height="16"><path d="M512 153.6c-123.477333 0-235.178667 51.9168-323.089067 137.557333C117.230933 360.96 68.266667 448.938667 68.266667 505.173333v13.6704c0 56.234667 48.981333 144.196267 120.644266 214.016C276.804267 818.466133 388.522667 870.4 512 870.4c123.613867 0 235.246933-51.234133 322.7648-135.970133 71.799467-69.5296 120.490667-157.320533 120.968533-215.296V505.173333c-0.477867-58.2656-49.169067-146.056533-120.968533-215.586133C747.246933 204.8512 635.5968 153.6 512 153.6z m0 68.266667c104.6528 0 199.799467 43.6736 275.268267 116.753066 59.886933 57.992533 99.8912 130.133333 100.1984 166.843734v13.380266c-0.3072 36.420267-40.311467 108.544-100.181334 166.536534C711.7824 758.459733 616.635733 802.133333 512 802.133333c-104.3456 0-199.560533-44.2368-275.456-118.186666C176.810667 625.7664 136.533333 553.4208 136.533333 518.843733V505.173333c0-34.577067 40.277333-106.922667 100.010667-165.12C312.439467 266.120533 407.6544 221.866667 512 221.866667z" fill="#444444" p-id="3592"></path><path d="M512 341.333333c-94.2592 0-170.666667 76.407467-170.666667 170.666667s76.407467 170.666667 170.666667 170.666667 170.666667-76.407467 170.666667-170.666667-76.407467-170.666667-170.666667-170.666667z m0 68.266667a102.4 102.4 0 1 1 0 204.8 102.4 102.4 0 0 1 0-204.8z" fill="#00B386" p-id="3593"></path></svg><i class="text-xs text-gray-500 pl-2 mt-2">3452</i></div>
    </li>
    <li class="flex mb-2">
      <img src="images/re4.png" alt="11" class="rounded-md "><div class=" border-b border-gray-400 ml-2"><p class="text-sm  pt-2 text-gray-500 ">Google老师亲授TensorFlow2...
      </p><span class="text-sm">$799</span><i class="text-sm"> · 中级 ·</i> <svg t="1650778403840" class="icon inline" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3591" width="16" height="16"><path d="M512 153.6c-123.477333 0-235.178667 51.9168-323.089067 137.557333C117.230933 360.96 68.266667 448.938667 68.266667 505.173333v13.6704c0 56.234667 48.981333 144.196267 120.644266 214.016C276.804267 818.466133 388.522667 870.4 512 870.4c123.613867 0 235.246933-51.234133 322.7648-135.970133 71.799467-69.5296 120.490667-157.320533 120.968533-215.296V505.173333c-0.477867-58.2656-49.169067-146.056533-120.968533-215.586133C747.246933 204.8512 635.5968 153.6 512 153.6z m0 68.266667c104.6528 0 199.799467 43.6736 275.268267 116.753066 59.886933 57.992533 99.8912 130.133333 100.1984 166.843734v13.380266c-0.3072 36.420267-40.311467 108.544-100.181334 166.536534C711.7824 758.459733 616.635733 802.133333 512 802.133333c-104.3456 0-199.560533-44.2368-275.456-118.186666C176.810667 625.7664 136.533333 553.4208 136.533333 518.843733V505.173333c0-34.577067 40.277333-106.922667 100.010667-165.12C312.439467 266.120533 407.6544 221.866667 512 221.866667z" fill="#444444" p-id="3592"></path><path d="M512 341.333333c-94.2592 0-170.666667 76.407467-170.666667 170.666667s76.407467 170.666667 170.666667 170.666667 170.666667-76.407467 170.666667-170.666667-76.407467-170.666667-170.666667-170.666667z m0 68.266667a102.4 102.4 0 1 1 0 204.8 102.4 102.4 0 0 1 0-204.8z" fill="#00B386" p-id="3593"></path></svg><i class="text-xs text-gray-500 pl-2 mt-2">1414</i></div>
    </li>
    <li class="flex mb-2">
      <img src="images/re5.jpg" alt="11" class="rounded-md "><div class=" border-b border-gray-400 ml-2"><p class="text-sm  pt-2 text-gray-500 ">PyTorch入门到进阶, 实战计算...
      </p><span class="text-sm">$499</span><i class="text-sm"> · 中级 ·</i> <svg t="1650778403840" class="icon inline" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3591" width="16" height="16"><path d="M512 153.6c-123.477333 0-235.178667 51.9168-323.089067 137.557333C117.230933 360.96 68.266667 448.938667 68.266667 505.173333v13.6704c0 56.234667 48.981333 144.196267 120.644266 214.016C276.804267 818.466133 388.522667 870.4 512 870.4c123.613867 0 235.246933-51.234133 322.7648-135.970133 71.799467-69.5296 120.490667-157.320533 120.968533-215.296V505.173333c-0.477867-58.2656-49.169067-146.056533-120.968533-215.586133C747.246933 204.8512 635.5968 153.6 512 153.6z m0 68.266667c104.6528 0 199.799467 43.6736 275.268267 116.753066 59.886933 57.992533 99.8912 130.133333 100.1984 166.843734v13.380266c-0.3072 36.420267-40.311467 108.544-100.181334 166.536534C711.7824 758.459733 616.635733 802.133333 512 802.133333c-104.3456 0-199.560533-44.2368-275.456-118.186666C176.810667 625.7664 136.533333 553.4208 136.533333 518.843733V505.173333c0-34.577067 40.277333-106.922667 100.010667-165.12C312.439467 266.120533 407.6544 221.866667 512 221.866667z" fill="#444444" p-id="3592"></path><path d="M512 341.333333c-94.2592 0-170.666667 76.407467-170.666667 170.666667s76.407467 170.666667 170.666667 170.666667 170.666667-76.407467 170.666667-170.666667-76.407467-170.666667-170.666667-170.666667z m0 68.266667a102.4 102.4 0 1 1 0 204.8 102.4 102.4 0 0 1 0-204.8z" fill="#00B386" p-id="3593"></path></svg><i class="text-xs text-gray-500 pl-2 mt-2">3419</i></div>
    </li>
  </ul>
</div>
<!-- 推荐课程 -->
<div class="re mt-7 ">
  <h4 class="font-bold mb-1">推荐课程</h4>
  <ul>
    <li class="flex mb-2">
      <img src="images/tj1.jpg" alt="11" class="rounded-md "><div class=" border-b border-gray-400 ml-2"><p class="text-sm  pt-2 text-gray-500 ">全面系统讲解CSS，工作应用+...
      </p><span class="text-sm">$2299</span><i class="text-sm"> · 中级 ·</i> <svg t="1650778403840" class="icon inline" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3591" width="16" height="16"><path d="M512 153.6c-123.477333 0-235.178667 51.9168-323.089067 137.557333C117.230933 360.96 68.266667 448.938667 68.266667 505.173333v13.6704c0 56.234667 48.981333 144.196267 120.644266 214.016C276.804267 818.466133 388.522667 870.4 512 870.4c123.613867 0 235.246933-51.234133 322.7648-135.970133 71.799467-69.5296 120.490667-157.320533 120.968533-215.296V505.173333c-0.477867-58.2656-49.169067-146.056533-120.968533-215.586133C747.246933 204.8512 635.5968 153.6 512 153.6z m0 68.266667c104.6528 0 199.799467 43.6736 275.268267 116.753066 59.886933 57.992533 99.8912 130.133333 100.1984 166.843734v13.380266c-0.3072 36.420267-40.311467 108.544-100.181334 166.536534C711.7824 758.459733 616.635733 802.133333 512 802.133333c-104.3456 0-199.560533-44.2368-275.456-118.186666C176.810667 625.7664 136.533333 553.4208 136.533333 518.843733V505.173333c0-34.577067 40.277333-106.922667 100.010667-165.12C312.439467 266.120533 407.6544 221.866667 512 221.866667z" fill="#444444" p-id="3592"></path><path d="M512 341.333333c-94.2592 0-170.666667 76.407467-170.666667 170.666667s76.407467 170.666667 170.666667 170.666667 170.666667-76.407467 170.666667-170.666667-76.407467-170.666667-170.666667-170.666667z m0 68.266667a102.4 102.4 0 1 1 0 204.8 102.4 102.4 0 0 1 0-204.8z" fill="#00B386" p-id="3593"></path></svg><i class="text-xs text-gray-500 pl-2 mt-2">12492</i></div>
    </li>
    <li class="flex mb-2">
      <img src="images/tj2.jpg" alt="11" class="rounded-md "><div class=" border-b border-gray-400 ml-2"><p class="text-sm  pt-2 text-gray-500 ">再谈前后端分离式：手把手从0...
      </p><span class="text-sm">$3289</span><i class="text-sm"> · 高级 ·</i> <svg t="1650778403840" class="icon inline" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3591" width="16" height="16"><path d="M512 153.6c-123.477333 0-235.178667 51.9168-323.089067 137.557333C117.230933 360.96 68.266667 448.938667 68.266667 505.173333v13.6704c0 56.234667 48.981333 144.196267 120.644266 214.016C276.804267 818.466133 388.522667 870.4 512 870.4c123.613867 0 235.246933-51.234133 322.7648-135.970133 71.799467-69.5296 120.490667-157.320533 120.968533-215.296V505.173333c-0.477867-58.2656-49.169067-146.056533-120.968533-215.586133C747.246933 204.8512 635.5968 153.6 512 153.6z m0 68.266667c104.6528 0 199.799467 43.6736 275.268267 116.753066 59.886933 57.992533 99.8912 130.133333 100.1984 166.843734v13.380266c-0.3072 36.420267-40.311467 108.544-100.181334 166.536534C711.7824 758.459733 616.635733 802.133333 512 802.133333c-104.3456 0-199.560533-44.2368-275.456-118.186666C176.810667 625.7664 136.533333 553.4208 136.533333 518.843733V505.173333c0-34.577067 40.277333-106.922667 100.010667-165.12C312.439467 266.120533 407.6544 221.866667 512 221.866667z" fill="#444444" p-id="3592"></path><path d="M512 341.333333c-94.2592 0-170.666667 76.407467-170.666667 170.666667s76.407467 170.666667 170.666667 170.666667 170.666667-76.407467 170.666667-170.666667-76.407467-170.666667-170.666667-170.666667z m0 68.266667a102.4 102.4 0 1 1 0 204.8 102.4 102.4 0 0 1 0-204.8z" fill="#00B386" p-id="3593"></path></svg><i class="text-xs text-gray-500 pl-2 mt-2">9843</i></div>
    </li>
    <li class="flex mb-2">
      <img src="images/tj3.jpg" alt="11" class="rounded-md "><div class=" border-b border-gray-400 ml-2"><p class="text-sm  pt-2 text-gray-500 ">微信小程序入门与实战-全新版...
      </p><span class="text-sm">$4999</span><i class="text-sm"> · 高级 ·</i> <svg t="1650778403840" class="icon inline" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3591" width="16" height="16"><path d="M512 153.6c-123.477333 0-235.178667 51.9168-323.089067 137.557333C117.230933 360.96 68.266667 448.938667 68.266667 505.173333v13.6704c0 56.234667 48.981333 144.196267 120.644266 214.016C276.804267 818.466133 388.522667 870.4 512 870.4c123.613867 0 235.246933-51.234133 322.7648-135.970133 71.799467-69.5296 120.490667-157.320533 120.968533-215.296V505.173333c-0.477867-58.2656-49.169067-146.056533-120.968533-215.586133C747.246933 204.8512 635.5968 153.6 512 153.6z m0 68.266667c104.6528 0 199.799467 43.6736 275.268267 116.753066 59.886933 57.992533 99.8912 130.133333 100.1984 166.843734v13.380266c-0.3072 36.420267-40.311467 108.544-100.181334 166.536534C711.7824 758.459733 616.635733 802.133333 512 802.133333c-104.3456 0-199.560533-44.2368-275.456-118.186666C176.810667 625.7664 136.533333 553.4208 136.533333 518.843733V505.173333c0-34.577067 40.277333-106.922667 100.010667-165.12C312.439467 266.120533 407.6544 221.866667 512 221.866667z" fill="#444444" p-id="3592"></path><path d="M512 341.333333c-94.2592 0-170.666667 76.407467-170.666667 170.666667s76.407467 170.666667 170.666667 170.666667 170.666667-76.407467 170.666667-170.666667-76.407467-170.666667-170.666667-170.666667z m0 68.266667a102.4 102.4 0 1 1 0 204.8 102.4 102.4 0 0 1 0-204.8z" fill="#00B386" p-id="3593"></path></svg><i class="text-xs text-gray-500 pl-2 mt-2">9423</i></div>
    </li>
    <li class="flex mb-2">
      <img src="images/tj4.jpg" alt="11" class="rounded-md "><div class=" border-b border-gray-400 ml-2"><p class="text-sm  pt-2 text-gray-500 ">商业级支付宝小程序入门与实战...
      </p><span class="text-sm">$2799</span><i class="text-sm"> · 中级 ·</i> <svg t="1650778403840" class="icon inline" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3591" width="16" height="16"><path d="M512 153.6c-123.477333 0-235.178667 51.9168-323.089067 137.557333C117.230933 360.96 68.266667 448.938667 68.266667 505.173333v13.6704c0 56.234667 48.981333 144.196267 120.644266 214.016C276.804267 818.466133 388.522667 870.4 512 870.4c123.613867 0 235.246933-51.234133 322.7648-135.970133 71.799467-69.5296 120.490667-157.320533 120.968533-215.296V505.173333c-0.477867-58.2656-49.169067-146.056533-120.968533-215.586133C747.246933 204.8512 635.5968 153.6 512 153.6z m0 68.266667c104.6528 0 199.799467 43.6736 275.268267 116.753066 59.886933 57.992533 99.8912 130.133333 100.1984 166.843734v13.380266c-0.3072 36.420267-40.311467 108.544-100.181334 166.536534C711.7824 758.459733 616.635733 802.133333 512 802.133333c-104.3456 0-199.560533-44.2368-275.456-118.186666C176.810667 625.7664 136.533333 553.4208 136.533333 518.843733V505.173333c0-34.577067 40.277333-106.922667 100.010667-165.12C312.439467 266.120533 407.6544 221.866667 512 221.866667z" fill="#444444" p-id="3592"></path><path d="M512 341.333333c-94.2592 0-170.666667 76.407467-170.666667 170.666667s76.407467 170.666667 170.666667 170.666667 170.666667-76.407467 170.666667-170.666667-76.407467-170.666667-170.666667-170.666667z m0 68.266667a102.4 102.4 0 1 1 0 204.8 102.4 102.4 0 0 1 0-204.8z" fill="#00B386" p-id="3593"></path></svg><i class="text-xs text-gray-500 pl-2 mt-2">3463</i></div>
    </li>
    <li class="flex mb-2">
      <img src="images/tj5.png" alt="11" class="rounded-md "><div class=" border-b border-gray-400 ml-2"><p class="text-sm  pt-2 text-gray-500 ">Electron+React+七牛云 实战跨...
      </p><span class="text-sm">$2599</span><i class="text-sm"> · 高级 ·</i> <svg t="1650778403840" class="icon inline" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3591" width="16" height="16"><path d="M512 153.6c-123.477333 0-235.178667 51.9168-323.089067 137.557333C117.230933 360.96 68.266667 448.938667 68.266667 505.173333v13.6704c0 56.234667 48.981333 144.196267 120.644266 214.016C276.804267 818.466133 388.522667 870.4 512 870.4c123.613867 0 235.246933-51.234133 322.7648-135.970133 71.799467-69.5296 120.490667-157.320533 120.968533-215.296V505.173333c-0.477867-58.2656-49.169067-146.056533-120.968533-215.586133C747.246933 204.8512 635.5968 153.6 512 153.6z m0 68.266667c104.6528 0 199.799467 43.6736 275.268267 116.753066 59.886933 57.992533 99.8912 130.133333 100.1984 166.843734v13.380266c-0.3072 36.420267-40.311467 108.544-100.181334 166.536534C711.7824 758.459733 616.635733 802.133333 512 802.133333c-104.3456 0-199.560533-44.2368-275.456-118.186666C176.810667 625.7664 136.533333 553.4208 136.533333 518.843733V505.173333c0-34.577067 40.277333-106.922667 100.010667-165.12C312.439467 266.120533 407.6544 221.866667 512 221.866667z" fill="#444444" p-id="3592"></path><path d="M512 341.333333c-94.2592 0-170.666667 76.407467-170.666667 170.666667s76.407467 170.666667 170.666667 170.666667 170.666667-76.407467 170.666667-170.666667-76.407467-170.666667-170.666667-170.666667z m0 68.266667a102.4 102.4 0 1 1 0 204.8 102.4 102.4 0 0 1 0-204.8z" fill="#00B386" p-id="3593"></path></svg><i class="text-xs text-gray-500 pl-2 mt-2">14143</i></div>
    </li>
  </ul>
</div>
</div>
<!-- 底部栏 -->
<footer class="w-full bg-white h-32 absolute bottom-0 right-0 flex justify-center"><div class="mt-9 flex w-1/2 items-start flex-wrap">
  <ul class="">
    <li class=" text-gray-400 text-base  "><a href="">网站地图</a></li>
    <li class=" text-gray-400 text-base  "><a href="">网站首页</a></li>
    <li class=" text-gray-400 text-base  "><a href="">企业服务</a></li>
    <li class=" text-gray-400 text-base  "><a href="">关于我们</a></li>
    <li class=" text-gray-400 text-base  "><a href="">讲师招募</a></li>
    <li class=" text-gray-400 text-base  "><a href="">意见反馈</a></li>
    <li class=" text-gray-400 text-base  "><a href="">加入我们</a></li>
  </ul>
 
  <p class="text-base text-gray-400">Copyright © 2022 871602699@.qqcom All Rights Reserved duxiaojie |
    <svg t="1650779753683" class="icon inline" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4296" width="20" height="20"><path d="M778.24 163.84c-76.8-40.96-165.888-61.44-269.312-61.44s-192.512 20.48-269.312 61.44h-133.12l23.552 337.92c8.192 113.664 67.584 217.088 162.816 280.576l215.04 144.384 215.04-144.384c96.256-63.488 155.648-166.912 163.84-280.576l23.552-337.92H778.24z m47.104 333.824c-7.168 94.208-56.32 181.248-135.168 233.472l-181.248 120.832L327.68 731.136c-78.848-53.248-129.024-139.264-135.168-233.472L173.056 225.28h136.192v-26.624c58.368-23.552 124.928-34.816 199.68-34.816s141.312 12.288 199.68 34.816V225.28H844.8l-19.456 272.384z" fill="#d81e06" p-id="4297"></path><path d="M685.056 328.704v-46.08H455.68c2.048-4.096 6.144-9.216 11.264-15.36 5.12-7.168 9.216-12.288 11.264-15.36L419.84 240.64c-31.744 46.08-75.776 87.04-133.12 123.904 4.096 4.096 10.24 11.264 18.432 21.504l17.408 17.408c23.552-15.36 45.056-31.744 63.488-50.176 26.624 25.6 49.152 43.008 67.584 51.2-46.08 15.36-104.448 27.648-175.104 35.84 2.048 5.12 6.144 13.312 9.216 24.576 4.096 11.264 6.144 19.456 7.168 24.576l39.936-7.168v218.112H389.12V680.96h238.592v19.456h54.272V481.28H348.16c60.416-12.288 114.688-27.648 163.84-46.08 49.152 19.456 118.784 34.816 210.944 46.08 5.12-17.408 10.24-34.816 17.408-51.2-62.464-4.096-116.736-12.288-161.792-24.576 38.912-20.48 74.752-46.08 106.496-76.8z m-150.528 194.56h94.208v41.984h-94.208v-41.984z m0 78.848h94.208v41.984h-94.208v-41.984z m-144.384-78.848h94.208v41.984H390.144v-41.984z m0 78.848h94.208v41.984H390.144v-41.984zM424.96 326.656h182.272c-26.624 22.528-57.344 41.984-94.208 57.344-31.744-15.36-61.44-34.816-88.064-57.344z" fill="#d81e06" p-id="4298"></path></svg> 豫ICP备2022009134号</p>
</div>
<div class="mt-9">
<ul>
  <li><svg t="1650780001150" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5151" width="40" height="40"><path d="M632.4 545.3l109.6-88c13.9-11.2 6.6-33.6-11.2-34.5l-140.4-6.7c-4.1-0.2-7.7-2.8-9.2-6.7L531.5 278c-6.3-16.7-29.9-16.7-36.2 0l-49.8 131.4c-1.5 3.9-5.1 6.5-9.2 6.7l-140.4 6.7c-17.8 0.9-25.1 23.3-11.2 34.5l109.6 88c3.2 2.6 4.6 6.8 3.5 10.8l-37 135.6c-4.7 17.2 14.4 31.1 29.3 21.3l117.5-77c3.4-2.3 7.9-2.3 11.3 0l117.5 77c14.9 9.8 34-4.1 29.3-21.3l-37-135.6C627.8 552.1 629.2 547.9 632.4 545.3z" p-id="5152" fill="#1296db"></path><path d="M918.4 502l-26.8 0.5c-3.6-150.4-94.9-286.5-235.9-344.2-150-61.4-323.1-21.2-430.6 100.2-10.5 11.8-9.4 29.9 2.4 40.3 11.7 10.4 29.8 9.4 40.3-2.4 91.3-103.3 238.4-137.5 366.2-85.2 119.8 49.1 197.4 164.6 200.6 292.4l-29.2 0.6c-16.6 0.3-25.5 19.5-15.1 32.4l57.8 71.8c8.2 10.1 23.7 9.9 31.5-0.6l55.1-74C944.6 520.5 934.9 501.7 918.4 502z" p-id="5153" fill="#1296db"></path><path d="M796.4 725.2c-11.8-10.5-29.9-9.4-40.3 2.4C664.8 830.9 517.6 865.1 390 812.8c-119.8-49-197.4-164.6-200.6-292.4l29.2-0.6c16.6-0.3 25.5-19.5 15.1-32.4l-57.8-71.8c-8.2-10.1-23.7-9.9-31.5 0.6l-55.1 74c-9.9 13.3-0.2 32.1 16.4 31.8l26.8-0.5c3.6 150.4 94.9 286.5 235.9 344.2 46.8 19.2 95.9 28.5 144.5 28.5 107.2-0.1 212.2-45.2 286-128.7C809.3 753.7 808.3 735.6 796.4 725.2z" p-id="5154" fill="#1296db"></path></svg></li>
  <li><svg t="1650780132118" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6057" width="40" height="40"><path d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z" p-id="6058" fill="#1296db"></path></svg></li>
  <li><svg t="1650780154046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6978" width="40" height="40"><path d="M693.12 347.264c11.776 0 23.36 0.896 35.008 2.176-31.36-146.048-187.456-254.528-365.696-254.528C163.2 94.912 0 230.656 0 403.136c0 99.52 54.272 181.248 145.024 244.736L108.8 756.864l126.72-63.488c45.312 8.896 81.664 18.112 126.912 18.112 11.392 0 22.656-0.512 33.792-1.344-7.04-24.256-11.2-49.6-11.2-76.032C385.088 475.776 521.024 347.264 693.12 347.264zM498.304 249.024c27.392 0 45.376 17.984 45.376 45.248 0 27.136-17.984 45.312-45.376 45.312-27.072 0-54.336-18.176-54.336-45.312C443.968 266.944 471.168 249.024 498.304 249.024zM244.672 339.584c-27.2 0-54.592-18.176-54.592-45.312 0-27.264 27.392-45.248 54.592-45.248S289.92 266.944 289.92 294.272C289.92 321.408 271.872 339.584 244.672 339.584zM1024 629.76c0-144.896-145.024-262.976-307.904-262.976-172.48 0-308.224 118.144-308.224 262.976 0 145.28 135.808 262.976 308.224 262.976 36.096 0 72.512-9.024 108.736-18.112l99.392 54.528-27.264-90.624C969.728 783.872 1024 711.488 1024 629.76zM616.128 584.384c-17.984 0-36.224-17.92-36.224-36.224 0-18.048 18.24-36.224 36.224-36.224 27.52 0 45.376 18.176 45.376 36.224C661.504 566.464 643.648 584.384 616.128 584.384zM815.488 584.384c-17.856 0-36.032-17.92-36.032-36.224 0-18.048 18.112-36.224 36.032-36.224 27.264 0 45.376 18.176 45.376 36.224C860.864 566.464 842.752 584.384 815.488 584.384z" p-id="6979" fill="#1296db"></path></svg></li>
  <li><svg t="1650780176916" class="icon" viewBox="0 0 1138 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7853" width="40" height="40"><path d="M914.432 518.144q27.648 21.504 38.912 51.712t9.216 62.976-14.336 65.536-31.744 59.392q-34.816 48.128-78.848 81.92t-91.136 56.32-94.72 35.328-89.6 18.944-75.264 7.68-51.712 1.536-49.152-2.56-68.096-10.24-78.336-21.504-79.872-36.352-74.24-55.296-59.904-78.848q-16.384-29.696-22.016-63.488t-5.632-86.016q0-22.528 7.68-51.2t27.136-63.488 53.248-75.776 86.016-90.112q51.2-48.128 105.984-85.504t117.248-57.856q28.672-10.24 63.488-11.264t57.344 11.264q10.24 11.264 19.456 23.04t12.288 29.184q3.072 14.336 0.512 27.648t-5.632 26.624-5.12 25.6 2.048 22.528q17.408 2.048 33.792-1.536t31.744-9.216 31.232-11.776 33.28-9.216q27.648-5.12 54.784-4.608t49.152 7.68 36.352 22.016 17.408 38.4q2.048 14.336-2.048 26.624t-8.704 23.04-7.168 22.016 1.536 23.552q3.072 7.168 14.848 13.312t27.136 12.288 32.256 13.312 29.184 16.384zM656.384 836.608q26.624-16.384 53.76-45.056t44.032-64 18.944-75.776-20.48-81.408q-19.456-33.792-47.616-57.344t-62.976-37.376-74.24-19.968-80.384-6.144q-78.848 0-139.776 16.384t-105.472 43.008-72.192 60.416-38.912 68.608q-11.264 33.792-6.656 67.072t20.992 62.976 42.496 53.248 57.856 37.888q58.368 25.6 119.296 32.256t116.224 0.512 100.864-21.504 74.24-33.792zM522.24 513.024q20.48 8.192 38.912 18.432t32.768 27.648q10.24 12.288 17.92 30.72t10.752 39.424 1.536 42.496-9.728 38.912q-8.192 18.432-19.968 37.376t-28.672 35.328-40.448 29.184-57.344 18.944q-61.44 11.264-117.76-11.264t-88.064-74.752q-12.288-39.936-13.312-70.656t16.384-66.56q13.312-27.648 40.448-51.712t62.464-38.912 75.264-17.408 78.848 12.8zM359.424 764.928q37.888 3.072 57.856-18.432t21.504-48.128-15.36-47.616-52.736-16.896q-27.648 3.072-43.008 23.552t-17.408 43.52 9.728 42.496 39.424 21.504zM778.24 6.144q74.752 0 139.776 19.968t113.664 57.856 76.288 92.16 27.648 122.88q0 33.792-16.384 50.688t-35.328 17.408-35.328-14.336-16.384-45.568q0-40.96-22.528-77.824t-59.392-64.512-84.48-43.52-96.768-15.872q-31.744 0-47.104-15.36t-14.336-34.304 18.944-34.304 51.712-15.36zM778.24 169.984q95.232 0 144.384 48.64t49.152 146.944q0 30.72-10.24 43.52t-22.528 11.264-22.528-14.848-10.24-35.84q0-60.416-34.816-96.256t-93.184-35.84q-19.456 0-28.672-10.752t-9.216-23.04 9.728-23.04 28.16-10.752z" p-id="7854" fill="#1296db"></path></svg></li>
</ul>
</div>
</footer>

<script>

let btn1=document.querySelector('.one');
let div_one=document.querySelector('.div_one');
let btn2=document.querySelector('.two');
let div_two=document.querySelector('.div_two');
let wd=document.querySelector('#wd');
let pl=document.querySelector('.pl')
const bj=document.querySelector('#bj');
const list=document.querySelector('#list');
const shop=document.querySelector('.shop');
const shopbtn=document.querySelector('.shopbtn');
const closebtn=document.querySelector('.close');

const flag2=true;
// console.log(pl.children);
btn1.addEventListener('click',function(){   
        div_one.classList.toggle('div_one');
           
});
btn2.addEventListener('click',function(){
    div_two.classList.toggle('div_two');

}) 
for(let i=0;i<3;i++){
  pl.children[i].addEventListener('click',()=>{
    // console.log(list.children[i]);
    for(let i=0;i<3;i++){
      if(!list.children[i].classList.contains('hidden')){
        list.children[i].classList.add('hidden');
      }
      // console.log(list.children[j])
      // console.log(list.children[i].classList.contains('hidden'));
      // console.log(list.children[i])

    }
    for(let i=0;i<3;i++){
    
      pl.children[i].classList.remove('act')

    }
    pl.children[i].classList.add('act')

    // pl.children[i].classList.toggle('.act');
    list.children[i].classList.remove('hidden');
    // console.log(list.children[i]);

  })
}
shopbtn.addEventListener('click',()=>{
  shop.classList.remove('hidden')
})
closebtn.addEventListener('click',()=>{


  shop.classList.add('hidden')
})
const det=document.querySelectorAll('.det');
for(let i=0;i<det.length;i++){
  det[i].addEventListener('click',()=>{
    location.href='details.html'
  })
}
</script>
   
    

</body>
</html>